<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
  <title>LWN Simulator</title>

  <!-- General CSS Files -->
  <link rel="stylesheet" href="css/all.css">
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- CSS Libraries -->
  <link rel="stylesheet" href="css/iziToast.min.css">
  <link rel="stylesheet" href="css/leaflet.css"/>
  <link rel="stylesheet" href="css/Control.OSMGeocoder.css"/>

  <!-- Template CSS -->
  <link rel="stylesheet" href="css/custom/style.css">
  <link rel="stylesheet" href="css/custom/components.css">
  <link rel="stylesheet" href="css/custom/custom.css">

  <link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>

<body>

    <div id="app" >
        <div class="main-wrapper">

            <!-- sidebar -->       
            <div class="main-sidebar" >
                <aside id="sidebar-wrapper">
                    <div class="sidebar-brand">
                    <a href="#" >LWN Simulator</a>
                    </div>

                    <div class="sidebar-brand sidebar-brand-sm">
                    <a href="#">LWN</a>
                    </div>

                    <ul id ="sidebar" class="sidebar-menu">
                        
                        <li class="nav-item active">
                            <a id="home-tab" class="nav-link" data-tab="#home">
                                <img class="home  mr-3" /><span>Home</span>
                            </a>
                        </li>

                        <li class="menu-header">Components</li>

                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link has-dropdown">
                                <img class="device  mr-3" />
                                <span>Devices</span>
                            </a>

                            <ul class="dropdown-menu">
                                <li><a id="devs-tab" class="nav-link" data-tab="#devs" >List devices</a></li>
                                <li><a id="add-dev-tab" class="nav-link" data-tab="#add-dev">Add new device</a></li>                  
                            </ul>
                        </li>

                        <li class="nav-item dropdown">
                            <a href="#" class="nav-link has-dropdown">
                                <img class="gateway mr-3"/>
                                <span>Gateways</span>
                            </a>

                            <ul class="dropdown-menu">
                                <li><a id="gws-tab" class="nav-link" data-tab="#gws">List gateways</a></li>
                                <li><a id="add-gw-tab" class="nav-link " data-tab="#add-gw">Add new gateway</a></li>            
                            </ul>
                        </li>

                        <li class="nav-item">
                            <a id="bridge-tab" class="nav-link" data-tab="#bridge-gw" >
                                <img class="gateway mr-3"/> 
                                <span>Gateway Bridge</span>
                            </a>
                        </li>                      
                    </ul>
                </aside>
            </div>
        
            <!-- navbar -->
            <div class="navbar-bg bg-blue"></div> 
            <nav class="navbar navbar-expand-lg main-navbar">
            
                <div class="mr-auto"></div>
                <div class="navbar-nav navbar-right d-flex">
                    <span class="text-white align-self-center font-weight-bold mr-2">Status:</span>
                    <img id="state" src="img/red_circle.svg"  title="Simulator's status" class="mr-3 align-self-center">
                    <button class="btn btn-sim" ><img class="btn-play"></button>
                    <button class="btn btn-sim hide" ><img class="btn-stop"></button>        
        
                </div>

            </nav>
                  
            <!-- Main Content -->
            <div class="main-content tab-content">

                <section class="section">
                    <div class="section-header">
                        <h1>LWN Simulator</h1>
                    </div>
                </section>

                <!-- home-->
                <div id="home" class="tab-pane fade show active" > 

                    <div class="row">

                        <div class="col-lg-8">
                            <div class="card">
                                <div class="card-body">                 
                                    <div id="map-home"  data-height="500"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="card">
                                <div class="card-body  text-center" >                         
                                    <ul class="list-group overflow-auto list-group-flush" data-height="500" id="list-home">       
                                    </ul>                          
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="row">
                        <div class="col-12">
                            <div class="card">

                                <div class="card-header bg-blue clickable p-0" > 
                                    <div id="accordion-console" class="w-100 d-flex align-items-center align-self-stretch">
                                        <div id="container-header-accordion" class="w-100 d-flex align-items-center align-self-stretch">
                                            <h4 id="header-console" class="ml-4 w-100 ">Console</h4>
                                        </div>
                                        <button class="btn-clean btn pt-2 pb-2 mr-2"> <img src=""> </button>
                                        </div>
                                </div>

                                <div class="card-body">
                                    
                                    <div class="accordion">
                                        <div class="accordion-body collapse show overflow-auto " id="console-body" >
                                        
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                    </div>
                    
                </div>

                <!-- list of devices-->
                <div id="devs" class="tab-pane fade" >
                    <div class="card">
                        <div class="card-body overflow-auto">
                            <table class="table table-sm table-hover">
                                <thead>
                                <tr>
                                    <th class="w-33" scope="col">Initial state</th>
                                    <th class="w-33" scope="col">Name</th>
                                    <th class="w-33" scope="col">Device EUI</th>
                                </tr>
                                </thead>
                                <tbody id="list-devices">
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- add new device-->
                <div id="add-dev" class="tab-pane fade" >
                    <div class="row">

                        <div class="col-lg-4">
                            <div class="card">
                                <div id="header-sidebar-dev" class="card-header">
                                    <h4>Device's Settings</h4>
                                </div>
                                <div class="card-body">
                                    <ul class="nav nav-pills flex-column" id="device-settings" role="tablist">

                                        <li class="nav-item">
                                        <a class="nav-link active" id="general-tab" data-toggle="tab" href="#general" role="tab" aria-controls="general" aria-selected="true">General</a>
                                        </li>

                                        <li class="nav-item">
                                        <a class="nav-link" id="activation-tab" data-toggle="tab" href="#activation" role="tab" aria-controls="activation" aria-selected="false">Activation</a>
                                        </li>

                                        <li class="nav-item">
                                        <a class="nav-link" id="classA-tab" data-toggle="tab" href="#classA" role="tab" aria-controls="classA" aria-selected="false">Class A</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="classB-tab" data-toggle="tab" href="#classB" role="tab" aria-controls="classB" aria-selected="false">Class B</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="classC-tab" data-toggle="tab" href="#classC" role="tab" aria-controls="classC" aria-selected="false">Class C</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="frames-tab" data-toggle="tab" href="#frames" role="tab" aria-controls="frames" aria-selected="false">Frame's settings</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="features-tab" data-toggle="tab" href="#features" role="tab" aria-controls="features" aria-selected="false">Features</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="location-tab" data-toggle="tab" href="#location" role="tab" aria-controls="location" aria-selected="false">Location</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="payload-tab" data-toggle="tab" href="#payload" role="tab" aria-controls="payload" aria-selected="false">Payload</a>
                                        </li>

                                    </ul>
                                </div>

                            </div>
                        </div>

                        <div class="col-lg-8">
                            <div class="tab-content no-padding" id="tab-content-new-device">
                                
                                <!--general-->
                                <div class="tab-pane fade show active" id="general" role="tabpanel" aria-labelledby="general-tab">
        
                                    <div class="card" id="settings-card">

                                        <div class="card-header">
                                            <h4>General Settings</h4>
                                        </div>

                                        <div class="card-body">
                                            <!--Active/Inactive-->
                                            <div class="form-group row align-items-center">
                                                <div class="col-xl-2">
                                                </div>
                                                
                                                <div class="col-xl-10">
                                                    <input class="form-check-input text-xl-right" type="checkbox" name="checkbox-active-dev">
                                                    <label class="form-control-label ">
                                                        Active
                                                    </label>
                                                </div>
                                                
                                            </div>

                                            <!--Name-->
                                            <div class="form-group row align-items-center">
                                            
                                                <label for="name-dev" class="form-control-label col-xl-2 text-xl-right">Name</label>
                                                <div class="col-xl-10">
                                                    <input type="text" name="input-name-dev" class="form-control" id="name-dev">
                                                </div>

                                            </div>

                                            <!--DevEUI-->
                                            <div class="form-group row align-items-center">
                                            
                                                <label for="dev-eui" class="form-control-label col-xl-2 text-xl-right">DevEUI</label>
                                                <div class="col-xl-10 input-group">
                                                    
                                                    <input type="text" name="input-devEUI" class="form-control mr-1" id="dev-eui">
                                                    <button name="btn-new-devEUI" class="btn btn-classic btn-generate" type="button"><img  heigh=16 src=""/></button>
                                                    <div class="invalid-feedback">
                                                        This format is incorrect. Example correct: 0000000000000000
                                                    </div>

                                                </div>
                                                
                                            </div>

                                            <!--Region-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label class="form-control-label col-xl-2 text-xl-right">Region</label>
                                                <div class="col-xl-10 input-group">
                                                    <select id="region" class="form-control">
                                                        <option value="-1"> </option>
                                                        <option value="1">EU868</option>
                                                        <option value="2">US915</option>
                                                        <option value="3">CN779</option>
                                                        <option value="4">EU433</option>
                                                        <option value="5">AU915</option>
                                                        <option value="6">CN470</option>
                                                        <option value="7">AS923</option>
                                                        <option value="8">KR920</option>
                                                        <option value="9">IN865</option>
                                                        <option value="10">RU864</option>
                                                    </select>
                                                </div> 

                                            </div>
                                        </div>    
                                    </div>
                                </div>

                                <!--activation-->
                                <div class="tab-pane fade" id="activation" role="tabpanel" aria-labelledby="activation-tab">
                                    <div class="card" id="settings-card">
                
                                        <div class="card-header">
                                            <h4>Activation Settings</h4>
                                        </div>
                
                                        <div class="card-body">
                
                                            <!--Otaa supported-->
                                            <div class="form-group row d-flex align-items-center flex-row-reverse">
                                                <div class="col-xl-2">
                                                </div>
                                                
                                                <div class="col-xl-10 ml-3">
                                                    <input class="form-check-input text-xl-right" type="checkbox" id="checkbox-otaa-dev">
                                                    <label class="form-control-label " for="checkbox-otaa-dev">
                                                        Otaa supported
                                                    </label>
                                                </div>
                                                
                                            </div>
                
                                            <!--AppKey-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label for="appkey" class="form-control-label col-xl-2 text-xl-right">App Key</label>
                                                <div class="col-xl-10 input-group">
                                                    
                                                    <input type="password" name="input-key-app" class="form-control mr-1" id="appkey" disabled readonly>
                                                    <button name="btn-watch" class="btn btn-classic btn-watch mr-1" type="button"><img  heigh=16 src=""/></button>
                                                    <button name="btn-new-key" class="btn btn-classic btn-generate" type="button"><img  heigh=16 src=""/></button>
                                                    <div class="invalid-feedback">  
                                                    </div>
                
                                                </div>
                                                
                                            </div>
                
                                            <!--Dev Addr-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label for="devAddr" class="form-control-label col-xl-2 text-xl-right">DevAddr</label>
                                                <div class="col-xl-10 input-group">
                                                    
                                                    <input type="text" name="input-devAddr" class="form-control mr-1" id="devAddr">
                                                    <button name="btn-new-devAddr" class="btn btn-classic btn-generate" type="button"><img  heigh=16 src=""/></button>
                                                    <div class="invalid-feedback">  
                                                        The format is incorrect. Example: 00000000
                                                    </div>
                
                                                </div>
                                                
                                            </div>
                
                                            <!--NwkSKey-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label for="nwkSKey" class="form-control-label col-xl-2 text-xl-right">NwkSKey</label>
                                                <div class="col-xl-10 input-group">
                                                    
                                                    <input type="password" name="input-key-nwkS" class="form-control mr-1" id="nwkSKey">
                                                    <button name="btn-watch" class="btn btn-classic btn-watch mr-1" type="button"><img  heigh=16 src=""/></button>
                                                    <button name="btn-new-key" class="btn btn-classic btn-generate" type="button"><img  heigh=16 src=""/></button>
                                                    <div class="invalid-feedback">  
                                                    </div>
                
                                                </div>
                                                
                                            </div>
                
                                            <!--AppSKey-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label for="appSKey" class="form-control-label col-xl-2 text-xl-right">AppSKey</label>
                                                <div class="col-xl-10 input-group">
                                                    
                                                    <input type="password" name="input-key-appS" class="form-control mr-1" id="appSKey">
                                                    <button name="btn-watch" class="btn btn-classic btn-watch mr-1" type="button"><img  heigh=16 src=""/></button>
                                                    <button name="btn-new-key" class="btn btn-classic btn-generate" type="button"><img  heigh=16 src=""/></button>
                                                    <div class="invalid-feedback">  
                                                    </div>
                
                                                </div>
                                                
                                            </div>
                
                                        </div>
                
                                    </div>
                                                            
                                </div>

                                <!--class A-->
                                <div class="tab-pane fade" id="classA" role="tabpanel" aria-labelledby="classA-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Class A Settings</h4>
                                        </div>
            
                                        <div class="card-body">
                                            <p class="text-muted">RX1's settings</p>

                                            <!--Delay-->
                                            <div class="form-group row align-items-center">
                                            
                                                <label for="delay-rx1" class="form-control-label col-xl-2 text-xl-right">Delay</label>
                                                <div class="col-xl-10">
                                                    
                                                    <input type="number" name="input-rx-1-delay" class="form-control" id="delay-rx1">
                                                    <div class="form-text mt-0" >
                                                        Value in milliseconds. Default value is 1 second.
                                                    </div>

                                                </div>
                                            </div>

                                            <!--Duration-->
                                            <div class="form-group row align-items-center">
                                        
                                                <label for="duration-rx1" class="form-control-label col-xl-2 text-xl-right">Duration</label>
                                                <div class="col-xl-10">
                                                    
                                                    <input type="number" name="input-rx-1-duration" class="form-control" id="duration-rx1">
                                                    <div class="form-text mt-0" >
                                                        Value in milliseconds. Default value is 3 second.
                                                    </div>
                                                </div>
                                            </div>

                                            <!--Datarate offset rx1-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label class="form-control-label col-xl-2 text-xl-right">Data Rate offset</label>
                                                <div class="col-xl-10 input-group">
                                                    <select id="dr-offset-rx1" class="form-control">
                                                        
                                                    </select>
            
                                                </div> 
                                                
                                            </div>

                                            <p class="text-muted">RX2's settings</p>

                                            <!--Delay-->
                                            <div class="form-group row align-items-center">
                                            
                                                <label for="delay-rx2" class="form-control-label col-xl-2 text-xl-right">Delay</label>
                                                <div class="col-xl-10">
                                                    
                                                    <input type="number" name="input-rx-2-delay" class="form-control" id="delay-rx2">
                                                    <div class="form-text mt-0" >
                                                        Value in milliseconds. Default value is 1 second.
                                                    </div>

                                                </div>
                                            </div>

                                            <!--Duration-->
                                            <div class="form-group row align-items-center">
                                        
                                                <label for="duration-rx2" class="form-control-label col-xl-2 text-xl-right">Duration</label>
                                                <div class="col-xl-10">
                                                    
                                                    <input type="number" name="input-rx-2-duration" class="form-control" id="duration-rx2">
                                                    <div class="form-text mt-0" >
                                                        Value in milliseconds. Default value is 3 second.
                                                    </div>
                                                </div>
                                            </div>

                                            <!--Frequency-->
                                            <div class="form-group row align-items-center">
                                            
                                                <label class="form-control-label col-xl-2 text-xl-right">Channel frequency</label>
                                                <div class="col-xl-10">
                                                    
                                                    <input type="number" name="input-frequency-rx-2" class="form-control">
                                                    <div class="form-text mt-0" id="label-freq-rx2">
                                                        
                                                    </div>

                                                </div>
                                            </div>

                                            <!--Data rate-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label for="datarate-rx2" class="form-control-label col-xl-2 text-xl-right">Data Rate </label>
                                                <div class="col-xl-10">
                                                    
                                                    <select id="datarate-rx-2" class="form-control">
                                                        <option value="-1"> </option>
                                                    </select>
                                                    <div class="form-text mt-0" id="label-datarate-rx2">

                                                        
                                                    </div>
                                                </div>
                                            </div>

                                            <!--ACK Timeout-->
                                            <div class="form-group row align-items-center">
                                        
                                                <label for="ackTimeout" class="form-control-label col-xl-2 text-xl-right">ACK Timeout</label>
                                                <div class="col-xl-10">
                                                    
                                                    <input type="number" name="input-ackTimeout" class="form-control" id="ackTimeout">
                                                    <div class="form-text mt-0" >
                                                        Correct value between 1 and 3 seconds.Default value is 2 seconds.
                                                    </div>
                                                </div>

                                            </div>
                                
                                        </div>
            
                                    </div>
                                </div>

                                <!--class B-->
                                <div class="tab-pane fade" id="classB" role="tabpanel" aria-labelledby="classB-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Class B Settings</h4>
                                        </div>
            
                                        <div class="card-body">
                                            <!--Class B Flag-->
                                            <div class="form-group row d-flex align-items-center flex-row-reverse">
                                                <div class="col-xl-2">      
                                                </div>
                                                
                                                <div class="col-xl-10 ml-3">
                                                    <input class="form-check-input text-xl-right" name ="input-flag" data-class="B" type="checkbox" id="classB-dev">
                                                    <label class="form-control-label " >
                                                        Device Supports Class B
                                                    </label>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--class C-->
                                <div class="tab-pane fade" id="classC" role="tabpanel" aria-labelledby="classC-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Class C Settings</h4>
                                        </div>
            
                                        <div class="card-body">
                                            <!--Class C Flag-->
                                            <div class="form-group d-flex row align-items-center">
                                                <div class="col-xl-2">
                
                                                </div>
                                                
                                                <div class="col-xl-10 ml-3">
                                                    <input class="form-check-input text-xl-right" name ="input-flag" data-class="C" type="checkbox" id="classC-dev">
                                                    <label class="form-control-label " >
                                                        Device Supports Class C
                                                    </label>
                                                </div>
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!--Frame's Settings-->
                                <div class="tab-pane fade" id="frames" role="tabpanel" aria-labelledby="frames-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Frame Settings</h4>
                                        </div>

                                        <div class="card-body">

                                            <p class="text-muted">Uplink</p>

                                            <!--Data Rate-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label class="form-control-label col-xl-2 text-xl-right">Data Rate</label>
                                                <div class="col-xl-10">
                                                    <select id="datarate-uplink" class="form-control">
                                                    </select>
                                                    <div class="form-text mt-0" id="label-datarate-uplink">

                                                    </div>
                                                </div> 
                                                
                                                
                                            </div>

                                            <!--FPort-->
                                            <div class="form-group row align-items-center">
                                                    
                                                <label  class="form-control-label col-xl-2 text-xl-right">FPort</label>

                                                <div class="col-xl-10">                                              
                                                    <input type="number" name="input-fport" class="form-control" placeholder="FPort" >
                                                    <div class="form-text mt-0" >
                                                        Correct value between 1 and 223.
                                                    </div>
                                                </div>

                                            </div>

                                            <!--Retransmission-->
                                            <div class="form-group row align-items-center">
                                                    
                                                <label class="form-control-label col-xl-2 text-xl-right">Retransmission</label>

                                                <div class="col-xl-10">                                              
                                                    <input type="number" name="input-retransmission" class="form-control" placeholder="Retransmission" >
                                                    <div class="form-text mt-0" >
                                                        # Retransmission for ConfirmedData Uplink
                                                    </div>
                                                </div>

                                            </div>

                                            <!--FCnt-->
                                            <div class="form-group row align-items-center">
                                                    
                                                <label class="form-control-label col-xl-2 text-xl-right">FCnt</label>

                                                <div class="col-xl-10">                                              
                                                    <input type="number" name="input-fcnt" class="form-control" placeholder="FCnt" >
                                                </div>

                                            </div>

                                            <p class="text-muted">Downlink</p>

                                            <!--validation Flag-->
                                            <div class="form-group row align-items-center">
                                                <div class="col-xl-2">
                
                                                </div>
                                                
                                                <div class="col-xl-10">
                                                    <input class="form-check-input text-xl-right" name ="input-validate-counter" type="checkbox" >
                                                    <label class="form-control-label " >
                                                        (FCntDown) Disable frame-counter validation.
                                                    </label>
                                                </div>
                                                
                                            </div>

                                            <!--FCntDown-->
                                            <div class="form-group row align-items-center">
                                                    
                                                <label class="form-control-label col-xl-2 text-xl-right">FCntDown</label>

                                                <div class="col-xl-10">                                              
                                                    <input type="number" name="input-fcnt-downlink" class="form-control" placeholder="FCntDown" >
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!--features -->
                                <div class="tab-pane fade" id="features" role="tabpanel" aria-labelledby="features-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Features Settings</h4>
                                        </div>
            
                                        <div class="card-body">
                                            <div class="card-body">

                                                <div class="form-group row align-items-center">
                                                    <div class="col-xl-2">
                    
                                                    </div>
                                                    
                                                    <div class="col-xl-10">
                                                        <input class="form-check-input text-xl-right" name ="input-ADR" type="checkbox" id="ADR-Dev" >
                                                        <label class="form-control-label ">
                                                            ADR enabled
                                                        </label>
                                                    </div>
                                                    
                                                </div>

                                                <!--Range-->
                                                <div class="form-group row align-items-center">
                                                        
                                                    <label  class="form-control-label col-xl-2 text-xl-right">Range Antenna</label>

                                                    <div class="col-xl-10">                                              
                                                        <input type="number" name="input-range" class="form-control" placeholder="Range Antenna" >
                                                        <div  class="form-text mt-0" >
                                                            Value in meters. Default value is 10000 m.
                                                        </div>
                                                    </div>

                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!--location-->
                                <div class="tab-pane fade" id="location" role="tabpanel" aria-labelledby="location-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Location Settings</h4>
                                        </div>
            
                                        <div class="card-body">
                                            
                                            <div id="map-dev" data-height="400"></div>
                    
                                            <div id="coords" class="mt-3">
                                                
                                                <!--Latitudine-->
                                                <div class="form-group row align-items-center">
                                                
                                                    <label class="form-control-label col-xl-2 text-xl-right">Latitude</label>
                                                    <div class="col-xl-10">
                                                        
                                                        <input type="text" name="input-latitude" class="form-control" placeholder="Latitude" >
                                                        <div class="invalid-feedback">
                                                        
                                                        </div>

                                                    </div>
                                                </div>

                                                <!--Longitudine-->
                                                <div class="form-group row align-items-center">
                                                
                                                    <label class="form-control-label col-xl-2 text-xl-right">Longitude</label>
                                                    <div class="col-xl-10">
                                                        
                                                        <input type="text" name="input-longitude" class="form-control" placeholder="Longitude" >
                                                        <div class="invalid-feedback">
                                                        
                                                        </div>

                                                    </div>
                                                </div>
                                        
                                                <!--Altitudine-->
                                                <div class="form-group row align-items-center">
                                                
                                                    <label class="form-control-label col-xl-2 text-xl-right">Altitude</label>

                                                    <div class="col-xl-10">                                              
                                                        <input type="number" name="input-altitude" class="form-control" placeholder="Altitude" >
                                                    </div>
                                                </div>
                        
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!--payload-->
                                <div class="tab-pane fade" id="payload" role="tabpanel" aria-labelledby="payload-tab">
                                    <div class="card" id="settings-card">
            
                                        <div class="card-header">
                                        <h4>Payload Settings</h4>
                                        </div>
            
                                        <div class="card-body">

                                            <!--Uplink interval-->
                                            <div class="form-group row align-items-center">
                                                
                                                <label class="form-control-label col-xl-2 text-xl-right">Uplink Interval</label>

                                                <div class="col-xl-10">                                              
                                                    <input type="number" name="input-sendInterval" class="form-control" placeholder="Uplink Interval" >
                                                    <div class="form-text mt-0" >
                                                        The expected interval in seconds in which the device sends uplink. Default value is 10 seconds.
                                                    </div>
                                                </div>
                                            </div>

                                            <!--Fragmentation-->
                                            <div class="form-group row align-items-center">

                                                
                                                <div class=" col-xl-2 "></div>
                                                
                                                <div class="col-xl-10">

                                                    <p class="text-muted">If the payload exceeds the maximum size allowed by regional parameters:</p>
                                                    
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" name="input-fragment" id="fragments" checked >
                                                        <label class="form-check-label" for="fragments">Fragments the frame</label>
                                                    </div>
                
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" name="input-fragment" id="truncates" >
                                                        <label class="form-check-label" for="truncates">Truncates the frame</label>
                                                    </div>
                                        
                                                </div>
                                                
                                            </div>

                                            <!--MType-->
                                            <div class="form-group row align-items-center">
        
                                                <label class="form-control-label col-xl-2 text-xl-right">MType:</label>
                                                
                                                <div class="col-xl-10">

                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" name="input-mtype" id="confirmed" checked >
                                                        <label class="form-check-label" for="confirmed">ConfirmedDataUp</label>
                                                    </div>
                
                                                    <div class="form-check-inline">
                                                        <input class="form-check-input" type="radio" name="input-mtype" id="unconfirmed" >
                                                        <label class="form-check-label" for="unconfirmed">UnConfirmedDataUp</label>
                                                    </div>

                                                </div>
                                                
                                            </div>                               
        
                                            <!--Payload-->
                                            <div class="form-group row align-items-center">
                                                <label class="form-control-label col-xl-2 text-xl-right">Payload</label>
                                                <div class="col-xl-10">
                                                <textarea id="textarea-payload" class="form-control" name="input-payload" rows="3"></textarea>
                                                </div>
                                            </div>

                                            <!--Base64-->
                                            <div class="form-group row align-items-center">
                                                <div class="col-xl-2">
                                                </div>
                                                
                                                <div class="col-xl-10">
                                                    <input class="form-check-input text-xl-right" type="checkbox" name="checkbox-base64">
                                                    <label class="form-control-label ">
                                                        Base64 encoded
                                                    </label>
                                                </div>
                                                
                                            </div>

                                        </div>
                                    </div>
                                </div>

                                <!--buttons-->
                                <div id="div-buttons-dev" data-addr="" class="card-footer bg-whitesmoke text-right">
                                    <button name="btn-delete-dev" class="btn btn-del hide" type="button">Delete</button>
                                    <button name="btn-edit-dev" class="btn btn-edit hide" type="button">Edit</button>
                                    <button name="btn-save-dev" class="btn btn-classic" type="button">Save</button>     
                                </div>

                            </div>
                        </div>
                        
                    </div>
                    
                </div>
                    
                <!-- list of gateways-->
                <div id="gws" class="tab-pane fade" >

                    <div class="card">
                        <div class="card-body overflow-auto">
                            <table class="table table-sm table-hover">
                                <thead>
                                <tr>
                                    <th class ="w-25" scope="col">Initial state</th>  
                                    <th class ="w-25" scope="col">Name</th>
                                    <th class ="w-25" scope="col">MAC Address</th>
                                    <th class ="w-25" scope="col">Type</th>
                                </tr>
                                </thead>
                                <tbody id="list-gateways">
                                                 
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- add gateway-->
                <div id="add-gw" class="tab-pane fade" >
                    <div class="card">
                        <div class="card-body">

                            <!--type of gateway-->
                            <div id="choose-type" class="btn-group mb-3 d-flex justify-content-center" role="group" aria-label="Basic example">
                                <button id="virtual-gw" name="type-gw" type="button" class="btn btn-classic mr-3" >Virtual gateway</button>
                                <button id="real-gw" name="type-gw" type="button" class="btn btn-classic">Real gateway</button>
                            </div>
            
                            <div id="info-gw" class="hide">
                                
                                <!--Active/Inactive-->
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" id="checkbox-active-gw">
                                    <label class="form-check-label" for="checkbox-active-gw">
                                    Active
                                    </label>
                                </div>

                                <!--Name-->
                                <div class="form-group mt-3">
                                    <label>Name</label>
                                    <input type="text" class="form-control" name="input-name-gw" placeholder="Gateway's Name" required="">
                                    <div class="invalid-feedback">
                                        Choose another name for the gateway.
                                    </div>
                                </div>

                                <!--MAC Address-->
                                <div class="form-group mt-3">

                                    <label>MAC Address</label>
                                    <div class="input-group">

                                        <input type="text" class="form-control mr-1" name="input-MAC-gw" placeholder="Gateway's MAC Address" required="">
                                        <button name="btn-new-MACAddress" class="btn btn-classic btn-generate" type="button"><img  heigh=16 src=""/></button>
                                        <div class="invalid-feedback">
                                            The format is incorrect. Example correct: 0000000000000000
                                        </div>
                                    </div>           

                                </div>

                                <!--info real gateway-->
                                <div id="info-real-gw" class="hide">

                                    <div class="form-group">
                                        <label>Gateway's IPv4</label>
                                        <input type="text" class="form-control" name="input-IP-gw" required="">
                                        <div class="invalid-feedback">
                                            The format is incorrect. Example: 192.168.1.1
                                        </div>
                                    </div>
                        
                                    <div class="form-group">
                                        <label>Gateway's Port</label>
                                        <input type="text" class="form-control" name="input-port-gw" required="">
                                        <div class="invalid-feedback">
                                            Please choose a number from 0 to 65535.
                                        </div>
                                    </div>

                                </div>

                                <!--info virtual gateway-->
                                <div id="info-virtual-gw" class="hide">

                                    <div class="form-group">

                                        <label>KeepAlive</label>
                                        <input type="number" class="form-control" name="input-KeepAlive" aria-describedby="KeepAliveHelpBlock" placeholder="KeepAlive in seconds">
                                        <div id="KeepAliveHelpBlock" class="form-text mt-0" >
                                            Default value is 30 seconds.
                                        </div>

                                    </div>
                                </div>

                                <!--location-->
                                <div id="location" class="row">
                                    <div class="col-lg-9">
                                        <div id="map-gw" data-height="400"></div>
                                    </div>

                                    <div id="coords" class="col-lg-3">

                                        <!--Latitudine-->
                                        <div class="form-group mt-3">

                                            <label>Latitude</label>

                                            <input type="text" class="form-control" name="input-latitude" placeholder="Latitude" >

                                        </div>

                                        <!--Longitudine-->
                                        <div class="form-group mt-3">

                                            <label>Longitude</label>

                                            <input type="text" class="form-control" name="input-longitude" placeholder="Longitude" >
                
                                        </div>

                                        <!--Altitudine-->
                                        <div class="form-group mt-3">

                                            <label>Altitude</label>

                                            <input type="number" class="form-control" name="input-altitude" placeholder="Altitude" >
                                        
                                        </div>

                                    </div>
                                </div>

                                <!--buttons-->
                                <div id="div-buttons-gw" data-addr="" class=" d-flex justify-content-end">
                                    <button name="btn-delete-gw" class="btn btn-del  mr-1 hide" type="button">Delete</button>
                                    <button name="btn-edit-gw" class="btn btn-edit  mr-1 hide" type="button">Edit</button>
                                    <button name="btn-save-gw" class="btn btn-classic " type="button">Save</button>
                                </div>

                            </div>

                        </div>
                    </div>

                </div>

                <!-- gateway bridge-->
                <div id="bridge-gw" class="tab-pane fade" >

                    <div class="form-group">
                        <label>Gateway Bridge's address</label>
                        <input type="text" class="form-control" name="input-IP-bridge" required="">
                        <div class="form-text mt-0">
                            Correct format: IPv4 or URL.
                        </div>
                    
                    </div>

                    <div class="form-group">
                        <label>Gateway Bridge's Port</label>
                        <input type="text" class="form-control" name="input-port-bridge" required="">
                        <div class="invalid-feedback">
                            Please choose a number from 0 to 65535 
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2 d-xl-flex justify-content-xl-end me-1">
                        <button name="save-bridge" class="btn btn-classic " type="button">Save</button>
                    </div>

                </div>
                
            </div>
            
        </div> 
    </div>

    <!-- Modals-->
    <form class="modal fade" tabindex="-1" role="dialog" data-addr="" data-mtype="" id="modal-send-data">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Send Uplink</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </div>

                <div class="form-group modal-body">

                    <label>Payload</label>

                    <div class="input-group">
                        <textarea type="text" class="form-control" placeholder="Payload" name="send-payload" rows="3"></textarea>
                    </div>

                </div>

                <div class="modal-footer bg-whitesmoke br">
                    <button type="button" class="btn btn-del" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-classic" id="submit-send-payload">Send</button>
                </div>
                
            </div>
        </div>
    </form>

    <form class="modal fade" tabindex="-1" role="dialog" data-addr="" id="modal-pingSlotInfoReq">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Send PingSlotInfoReq MAC Command</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </div>

                <div class="form-group modal-body">

                    <label>Periodicity</label>

                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Periodicity" name="periodicity" />
                    </div>

                </div>

                <div class="modal-footer bg-whitesmoke br">
                    <button type="button" class="btn btn-del" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-classic" id="submit-send-mac-command">Send</button>
                </div>
                
            </div>
        </div>
    </form>

    <form class="modal fade" tabindex="-1" role="dialog" data-addr="" id="modal-location">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Change location</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </div>

                <div class="form-group modal-body">
                        <!--location-->
                        <div id="location" >
                            <div id="map-modal" data-height="300"></div>

                            <div id="coords">

                                <!--Latitudine-->
                                <div class="form-group mt-3">
                                    <label>Latitude</label>
                                    <input type="text" class="form-control" name="input-latitude" placeholder="Latitude" >
                                    <div class="invalid-feedback">
                                        
                                    </div>
                                </div>

                                <!--Longitudine-->
                                <div class="form-group mt-3">
                                    <label>Longitude</label>
                                    <input type="text" class="form-control" name="input-longitude" placeholder="Longitude" >
                                    <div class="invalid-feedback">
                                        
                                    </div>
                                </div>

                                <!--Altitudine-->
                                <div class="form-group mt-3">
                                    <label>Altitude</label>
                                    <input type="number" class="form-control" name="input-altitude" placeholder="Altitude" >
                                </div>

                            </div>
                        </div>
                </div>

                <div class="modal-footer bg-whitesmoke br">
                    <button type="button" class="btn btn-del" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-classic" id="submit-new-location">Send</button>
                </div>
                
            </div>
        </div>
    </form>

    <form class="modal fade" tabindex="-1" role="dialog" data-addr="" id="modal-change-payload">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Change Payload</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </div>

                <div class="form-group modal-body">

                    <!--MType-->
                    <div class="form-group row align-items-center">
 
                        <label class="form-control-label col-md-2 text-md-right">MType:</label>
                        
                        <div class="col-md-10">

                            <div class="form-check-inline">
                                <input class="form-check-input" type="radio" name="input-mtype-modal" id="confirmed-modal" checked >
                                <label class="form-check-label" >ConfirmedDataUp</label>
                            </div>

                            <div class="form-check-inline">
                                <input class="form-check-input" type="radio" name="input-mtype-modal" id="unconfirmed-modal" >
                                <label class="form-check-label" >UnConfirmedDataUp</label>
                            </div>

                        </div>
                        
                    </div>                               

                    <!--Payload-->
                    <div class="form-group row align-items-center">
                        <label class="form-control-label col-md-2 text-md-right">Payload</label>
                        <div class="col-md-10">
                          <textarea id="payload-modal" class="form-control" rows="3"></textarea>
                        </div>
                    </div>
                    
                </div>

                <div class="modal-footer bg-whitesmoke br">
                    <button type="button" class="btn btn-del" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-classic" name="btn-change-payload">Change</button>
                </div>
                
            </div>
        </div>
    </form>

    <form class="modal fade" tabindex="-1" role="dialog" data-addr="" id="modal-table">
        <div class="modal-dialog" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <h5 class="modal-title">Data rate table</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </div>

                <div class="form-group modal-body">
                    <table class="table table-sm text-center">
                        <thead>
                          <tr>
                            <th scope="col">Data rate</th>
                            <th scope="col">Configuration</th>
                            <th scope="col">Max payload size without FOpts</th>
                            <th scope="col">Max payload size with FOpts</th>
                          </tr>
                        </thead>
                        <tbody id ="table-body">
                          
                          
                        </tbody>
                      </table>
                    
                </div>
                
            </div>
        </div>
    </form>

    <!-- General JS Scripts -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
    <script src="js/moment.min.js"></script>
  <script src="js/custom/stisla.js"></script>
  
  <script src="js/jquery.nicescroll.min.js"></script>
  
  <!-- JS Libraies -->
  <script src="js/sweetalert.min.js"></script>
  <script src="js/iziToast.min.js"></script>
  <script src="js/socket.io.min.js"></script> 
  <script src="js/leaflet.js"></script>
  <script src="js/Control.OSMGeocoder.js"></script>

  
  <!-- Template JS File scripts.js must be before custom.js-->
  <script src="js/custom/scripts.js"></script>
  
  <!-- Page Specific JS File -->
  <script src="js/custom/custom.js"></script>

</body>

</html>